<script setup lang="ts">

import {computed, inject, provide, ref} from "vue";
import waybill from "@/api/document/waybill";
import shipment from "@/api/document/shipment";
import {Message} from "@arco-design/web-vue";
import {request} from "@/utils/request.js";
import tool from '@/utils/tool'
import WbbaseInfo from "@/views/document/waybill/WbbaseInfo.vue";
import WbRouteInfo from "@/views/components/routeInfo.vue";
import WbRouteInfo2 from "@/views/document/waybill/routeInfo.vue";
import workorder from "@/views/components/WorkOrder.vue";
import WbParcels from "@/views/document/waybill/WbParcels.vue";
import Costs from "@/views/document/waybill/Costs.vue";
import WbCosts from "@/views/components/expenseInfo.vue";
import {auth} from "@/utils/common";

const visible = ref(false)
const record = ref({})
const invoicesType = ref('waybill')
const span = ref(24)
const colGap = ref(6)
const rowGap = ref(6)
const crudRef = inject('crudRef')
const routeInfo = ref({type:"waybill",about_type:'App\\Document\\Model\\Waybill'})
const routeSpan = ref({lg: 4})
const workOrderData = ref({type:2,span:{ xs: 1, sm: 3,lg: 12}})
const title = computed(() => {
  const list = []
  const fields = [
    'shipment_no',
    'client_reference',
    'self_reference',
    'ext_number',
  ];
  for (const field of fields) {
    if (record.value[field]) {
      list.push(record.value[field])
    }
  }
  return "# " + list.join('/')
})
const detailLoading = ref(true)

const onShow = async (data) => {
  record.value.id = data.id
  visible.value = true
  detailLoading.value = true
  await getRecord();
  detailLoading.value = false
}

const getRecord = async function () {
  let result = await waybill.read(record.value.id);
  record.value = result.data
  return record
}
const cost = ref()
const freshFee = () =>{
  cost.value.getFeeTotal()
}

const cancel = async () => {
  let res = await shipment.cancel({ids: record.value.id})
  if (!res.success) {
    Message.error(res.message || '失败');
    return
  }
  Message.success(res.message || '成功');
  // crudRef.value.refresh();
  await getRecord()
}
const shipmentExecl = () =>{
  Message.info('请求服务器下载文件中...')
  let data = {ids:[record.value.id]}
  const download = (url) => request({url,data , method: 'post', timeout: 60 * 1000, responseType: 'blob'})
  
  download('document/waybill/shipmentExecl').then(res => {
    tool.download(res)
    Message.success('请求成功，文件开始下载')
  })
}
provide('span', span)
provide('invoicesType', invoicesType)
provide('getRecord', getRecord)
provide('colGap', colGap)
provide('rowGap', rowGap)
provide('record', record)
provide('routeInfo',routeInfo)
provide('routeSpan',routeSpan)
provide('workOrderData', workOrderData)
provide('freshFee', freshFee)
defineExpose({onShow,getRecord})
</script>

<template>

  <a-drawer v-model:visible="visible" v-if="visible" width="80%" unmount-on-close :footer="false">
    <template #title v-if="!detailLoading">
      <div class="grid grid-cols-[minmax(0,1fr),auto] items-center">
        <div>#{{ record.public_number }}</div>
        <div>
          <a-button><icon-eye/>查看统计</a-button>
          <a-button v-auth="['document:waybill:shipmentExecl']" @click="shipmentExecl()"><icon-download/>装柜单导出</a-button>
        </div>
      </div>
    </template>
    <a-spin v-if="detailLoading" :loading="detailLoading" tip="数据加载中..." style="text-align: center;display: block;margin-top: 100px;">
    </a-spin>
    <a-space direction="vertical" class="w-full"  v-if="!detailLoading">
      <a-grid :cols="12" :colGap="colGap" :rowGap="rowGap">
        <!-- 基础信息 -->
        <wbbaseInfo/>
        <!-- 路由信息 -->
        <wbRouteInfo />
        <wbRouteInfo2 v-if="auth('document:waybill:getAllRoute')" />
        <!--       运单/货箱 -->
        <wbParcels/>
        <!-- 成本核算 -->
        <costs ref="cost" />
        <!-- 应付 -->
        <wbCosts v-if="auth('finance:supplierFee:index')"/>
        <workorder v-if="auth('logistics:workOrder:index')" />
        <!-- 分单管理 -->
<!--        <a-grid-item :span="{lg: 12}" class="g-collapse">-->
<!--          <a-collapse :default-active-key="['1']">-->
<!--            <a-collapse-item header="分单管理" key="1">-->
<!--            </a-collapse-item>-->
<!--          </a-collapse>-->
<!--        </a-grid-item>-->
        <!-- 附件 -->
<!--        <a-grid-item :span="{lg: 6}" class="g-collapse">-->
<!--          <a-collapse :default-active-key="['1']">-->
<!--            <a-collapse-item header="附件" key="1">-->
<!--            </a-collapse-item>-->
<!--          </a-collapse>-->
<!--        </a-grid-item>-->
        <!-- 工单 -->
<!--        <a-grid-item :span="{lg: 6}" class="g-collapse">-->
<!--          <a-collapse :default-active-key="['1']">-->
<!--            <a-collapse-item header="工单" key="1">-->
<!--            </a-collapse-item>-->
<!--          </a-collapse>-->
<!--        </a-grid-item>-->
        <!-- 操作日志 -->
<!--        <a-grid-item :span="{lg: 6}" class="g-collapse">-->
<!--          <a-collapse :default-active-key="['1']">-->
<!--            <a-collapse-item header="操作日志" key="1">-->
<!--            </a-collapse-item>-->
<!--          </a-collapse>-->
<!--        </a-grid-item>-->
        <!-- 派送 -->
<!--        <a-grid-item :span="{lg: 6}" class="g-collapse">-->
<!--          <a-collapse :default-active-key="['1']">-->
<!--            <a-collapse-item header="派送" key="1">-->
<!--            </a-collapse-item>-->
<!--          </a-collapse>-->
<!--        </a-grid-item>-->
      </a-grid>
    </a-space>
  </a-drawer>
</template>